<!--
 * @Author: your name
 * @Date: 2022-04-17 15:48:57
 * @LastEditTime: 2022-04-17 22:07:54
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \drivingApp\driving-app\src\views\article\index.vue
-->
<template>
  <div class="container">
    <div class="content">
      <div class="button_box">
          <el-button type="primary" @click="addArticleHandle ">新增文章</el-button>
      </div>
      <div class="table">
        <el-table
        :data="articleList"
        style="width: 100%"
        >
        <el-table-column
          prop="author"
          label="作者"
          align="center"
          width="300">
        </el-table-column>
        <el-table-column
          prop="content"
          label="内容"
          align="center"
          width="300">
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="提交时间"
          align="center"
          sortable
          width="300"
          >
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          align="center"
          width="300">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 'publish'" type="success">已发布</el-tag>
            <el-tag v-else type="danger">未发布</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="300">
          <template slot-scope="scope">
            <el-button
              type="text" :disabled="scope.row.status !== 'draft'"
              @click="handleEdit(scope.row)">发布</el-button>
              <el-button
              type="text" :disabled="scope.row.status === 'draft'"
              @click="handleCancel(scope.row)">取消发布</el-button>
            <el-button
              type="text"
              @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
      <div class="pagination">
        <el-pagination @current-change="(value) => handleCurrent(value)" :current-change="currentChange"
          background
          layout="prev, pager, next"
          :total="pageTotal">
        </el-pagination>
      </div>
    </div>
    <!-- 对话框 -->
    <el-dialog title="新增文章" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="标题" >
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="内容" >
          <el-input v-model="form.content" type="textarea"  autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.category" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTheArticle">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getArticleList,addArticle,delectArticle,updataArticlStatus,cancelStatus} from '@/api/user'
export default {
  data() {
    return {
      dialogFormVisible:false,
      articleList:[],
      pageSize:10,
      pageNum:1,
      title: "",
      content: "",
      category: 1,
      pageTotal:0,
      options:[
        {value:1,label:"科目一"},
        {value:2,label:"科目二"},
        {value:3,label:"科目三"},
        {value:4,label:"科目四"},
      ],
      form:{
        title: "",
        content: "",
        coverUrl: "",
        status: "draft",
        category: 1,
        isRecommend: true
      }
    }
  },
  computed:{
    currentChange(){
      return this.pageNum
    }
  },
  mounted() {
    this.getTheArticleList(1)
  },
  methods: {
    addTheArticle(){
      let requestBody = {
          title: this.form.title,
          content: this.form.content,
          category: this.form.category,
      }
      addArticle(requestBody).then(res => {
        if(res.code === 0 ){
          this.$message.success('success')
          this.dialogFormVisible = false
          this.getTheArticleList(1)
        }else{
          this.$message.error('error')
        }
      })
    },
    handleCurrent(value){
      this.getTheArticleList(value)
    },
    addArticleHandle(){
      this.form = {
        title: "",
        content: "",
        coverUrl: "",
        status: "draft",
        category: 1,
        isRecommend: true
      }
      this.dialogFormVisible = true
    },
    getTheArticleList(value){
      let requestBody = {
          title: this.title,
          content: this.content,
          category: this.category,
          pageSize: this.pageSize,
          pageNum: value
      }
      getArticleList(requestBody).then(res => {
        if(res.code == 0){
          this.articleList = res.data.list 
          this.pageTotal = res.data.Total
          this.pageNum = value
        }
      })
    },
    handleEdit(row){
      updataArticlStatus(row.id).then(res =>{
        if(res.code === 0){
          this.$message.success('success')
          this.getTheArticleList(this.pageNum)
        }else{
          this.$message.error('error')
        }
      })
    },
    handleCancel(row){
      cancelStatus(row.id).then(res => {
        if(res.code === 0){
          this.$message.success('success')
          this.getTheArticleList(this.pageNum)
        }else{
          this.$message.error('error')
        }
      })
    },
    handleDelete(row){
      delectArticle(row.id).then(res =>{
        if(res.code === 0){
          this.$message.success('success')
          this.getTheArticleList(this.pageNum)
        }else{
          this.$message.error('error')
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
  .container{
    .content{
      width: 92%;
      margin-left: 5%;
      margin-top: 3%;
      position: relative;
      .button_box{
        margin-bottom: 1%;
      }
      .table{
        border: 1px solid #909399;
        border-radius: 8px;
        overflow: auto;
      }
      .pagination{
        position: absolute;
        left: 45%;
      }
    }
  }
</style>